<!-- 方案切换 -->
<template>
    <div class="box">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
            <el-form-item label="客户名" prop="userName">
                <el-input v-model="queryParams.userName" placeholder="请输入客户名" clearable style="width: 240px"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="客户号" prop="userName">
                <el-input v-model="queryParams.userName" placeholder="请输入客户号" clearable style="width: 240px"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="box_operate">
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                v-hasPermi="['system:schemechange:add']">新增</el-button>
            <!-- <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
                v-hasPermi="['fileManagement:areaDefinition:remove']" v-if="isDeled">删除</el-button> -->
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="待生效明细" name="1">
                <el-table v-loading="loading" :data="userList" border @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="50" align="center" fixed="left" />
                    <el-table-column label="客户名" align="center" key="customerName" prop="customerName"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="客户号" align="center" key="customerId" prop="dept.customerId"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="表计通讯地址" align="center" key="mailAddress" prop="mailAddress"
                        :show-overflow-tooltip="true" width="100" />
                    <el-table-column label="计费方案" align="center" key="originalSchemeName" prop="originalSchemeName"
                        :show-overflow-tooltip="true" width="100" />
                    <el-table-column label="目标计费方案" align="center" key="schemeName" prop="dept.schemeName"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="生效时间" align="center" key="effectiveTime" prop="effectiveTime"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="备注" align="center" key="remark" prop="dept.remark"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="操作" align="center" key="userNam8e" prop="userName8" fixed="right" width="100">
                        <template slot-scope="scope">
                            <el-button @click="handleClickSee(scope.row)" type="text" size="small">查看</el-button>
                            <el-button type="text" size="small" v-hasPermi="['sevice:price:switch']">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getList" />
            </el-tab-pane>
            <el-tab-pane label="历史切换记录" name="2">
                <el-table v-loading="loading" :data="userList1" border @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="50" align="center" fixed="left" />
                    <el-table-column label="客户名" align="center" key="customerName" prop="customerName"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="客户号" align="center" key="customerId" prop="customerId"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="表计通讯地址" align="center" key="mailAddress" prop="mailAddress"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="计费方案" align="center" key="originalSchemeName" prop="originalSchemeName"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="目标计费方案" align="center" key="schemeName" prop="schemeName"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="生效状态" align="center" key="effectiveStatus" prop="effectiveStatus"
                        :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <span v-if="scope.row.effectiveStatus == 'N'">未生效</span>
                            <span v-if="scope.row.effectiveStatus == 'Y'">已生效</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="生效时间" align="center" key="effectiveTime" prop="effectiveTime"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="备注" align="center" key="remark" prop="remark" :show-overflow-tooltip="true" />
                </el-table>
                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getList" />
            </el-tab-pane>

        </el-tabs>
        <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="原计费方案" prop="originalSchemeId">
                            <el-select v-model="form.originalSchemeId" filterable placeholder="请选类型" style="width:250px"
                                @change="change1">
                                <el-option v-for="(item, index) in programmeLisyt" :key="index" :label="item.schemeName"
                                    :value="item.id" :disabled="item.status"> </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <div class="fangan">
                                <div v-for="(item, index) in detailJson" :key="index">
                                    <el-row>
                                        <el-col :span="12">
                                            <div><span>{{ index + 1 }}</span><span>{{ '(' }}</span><span>{{
                                                item.startingValue
                                            }}</span><span>-</span><span>{{ item.startingValue }}</span>{{ ')'
}}<span></span></div>
                                        </el-col>
                                        <el-col :span="12">
                                            <div class="num">{{ item.tieredPrice }}</div>
                                        </el-col>
                                    </el-row>
                                </div>

                            </div>
                        </el-form-item>
                        <el-form-item>
                            <div class="jiantou"><i class="el-icon-bottom" style="color:blue;font-size:26px"></i></div>
                        </el-form-item>
                        <el-form-item label="目标计费方案" prop="schemeId">
                            <el-select v-model="form.schemeId" filterable placeholder="请选类型" style="width:250px"
                                @change="change2">
                                <el-option v-for="(item, index) in programmeLisyt1" :key="index" :label="item.schemeName"
                                    :value="item.id" :disabled="item.status"> </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <div class="fangan">
                                <div v-for="(item, index) in detailJson1" :key="index">
                                    <el-row>
                                        <el-col :span="12">
                                            <div><span>{{ index + 1 }}</span><span>{{ '(' }}</span><span>{{
                                                item.startingValue
                                            }}</span><span>-</span><span>{{ item.startingValue }}</span>{{ ')'
}}<span></span></div>
                                        </el-col>
                                        <el-col :span="12">
                                            <div class="num">{{ item.tieredPrice }}</div>
                                        </el-col>
                                    </el-row>
                                </div>

                            </div>
                        </el-form-item>
                        <el-form-item label="生效时间" prop="effectiveTime">
                            <el-date-picker v-model="form.effectiveTime" type="datetime" placeholder="选择生效时间"
                                style="width:250px" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="备注" prop="remark" required>
                            <el-input v-model="form.remark" placeholder="请输入名称" maxlength="30" style="width:250px" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-alert :title="alertText" type="info">
                        </el-alert>
                        <el-tree :data="areaOptions" show-checkbox node-key="id" :props="defaultProps" @check="checkChange">
                        </el-tree>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { switchList, switchInfo, addSwitch, updateSwitch, delSwitch, exportSwitch } from '@/api/service/price.js'
import { areaTreeList } from "@/api/fileManagement/areainfo.js"
import { planList, } from '@/api/service/planlist.js'
export default {
    data() {
        return {
            queryParams: {
                pageNum: 1,
                pageSize: 10
            },
            queryParams1: {
                pageNum: 1,
                pageSize: 10
            },
            queryParams2: {
                pageNum: 1,
                pageSize: 9999
            },
            isDeled: false,
            activeName: '2',
            total: 0,
            loading: false,
            userList: [],
            userList1: [],
            title: '计费方案切换',
            open: false,
            form: {
                remark: '',
                effectiveTime: '',
                dataJson: '',
                schemeId: '',
                originalSchemeId: '',
            },
            rules: {
                originalSchemeId: [
                    { required: true, message: "原计费方案不能为空", trigger: "blur" },
                ],
                schemeId: [
                    { required: true, message: "目标计费方案不能为空", trigger: "blur" },
                ],
                effectiveTime: [
                    { required: true, message: "生效时间不能为空", trigger: "blur" },
                ],
            },
            value1: '',
            alertText: '生效范围已选择：',
            // 企业树选项
            areaOptions: undefined,
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            programmeState: 0,
            programmeState1: 0,
            programmeLisyt: [

            ],
            programmeLisyt1: [

            ],
            detailJson: [],
            detailJson1: [],
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                },
            },
        }
    },
    watch: {
        form: {
            deep: true,
            handler(val) {
                this.form = val
            },
        },
        programmeLisyt: {
            deep: true,
            handler(val) {
                this.programmeLisyt = val
            }
        },
        programmeLisyt1: {
            deep: true,
            handler(val) {
                this.programmeLisyt1 = val
            }
        },
    },
    mounted() {
        this.getList()
        this.getDeptTree();
    },
    methods: {
        // 获取方案列表
        getPlanList() {
            planList(this.queryParams2).then((res) => {
                console.log(res.rows)
                let list = JSON.parse(JSON.stringify(res.rows))
                if (res.code == 200) {
                    list.map((item) => {
                        item.status = false
                    })
                    this.programmeLisyt = list
                    this.programmeLisyt1 = list
                }

            })
        },
        /** 查询企业下拉树结构 */
        getDeptTree() {
            areaTreeList().then((response) => {
                this.areaOptions = response.data;
            });
        },
        // 原方案改变
        change1(event) {
            this.programmeState = event
            this.programmeState1 = 0
            // this.$set(this.form, 'originalSchemeId', event)
            this.programmeLisyt1.map((res) => {
                if (res.id == event) {
                    this.detailJson = JSON.parse(res.detailJson)
                    console.log(this.detailJson, 2222222)
                    res.status = true
                } else {
                    res.status = false
                }
            })

        },
        // 新方案改变
        change2(event) {
            this.programmeState1 = event
            // this.$set(this.form, 'schemeId', event)
            this.programmeLisyt.map((res) => {
                if (res.id == event) {
                    this.detailJson1 = JSON.parse(res.detailJson)
                    res.status = true
                } else {
                    res.status = false
                }
            })
        },
        // 搜索
        handleQuery() {
            this.getList()
        },
        //重置
        resetQuery() {
            this.getList()
        },
        // 新增
        handleAdd() {
            this.open = true
            this.getPlanList()
        },
        // 新增确定
        submitForm() {
            console.log(this.form, 22222222222)
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    addSwitch(this.form).then((res) => {
                        this.open = false
                        this.queryParams.effectiveStatus = 'N'
                        this.getList()
                        if (res.code == 200) {
                            this.$modal.msgSuccess("修改成功");
                        } else {
                            this.$modal.msgError(res.msg);
                        }
                    })
                }
            })


        },
        // 新增取消
        cancel() {
            this.open = false
        },
        // 删除
        handleDelete() {
            this.$modal
                .confirm('确定删除数据吗？')
                .then(function () {
                    return delSwitch(userIds);
                })
                .then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                })
                .catch(() => { });
        },
        // tab切换
        handleClick(tab, event) {
            console.log(tab, event)
            console.log(event.target.innerText, 1111111111)
            if (event.target.innerText == '待生效明细') {
                this.isDeled = true
                this.queryParams.effectiveStatus = 'N'
                this.getList()
            } else {
                this.isDeled = false
                this.queryParams.effectiveStatus = ''
                this.getList()
            }
        },
        // 待生效明细查看
        handleClickSee(info) {
            switchInfo(info.id).then((res) => {
                console.log(res, 111111111)
            })
        },
        //
        handleSelectionChange() { },
        // 分页
        getList() {
            switchList(this.queryParams).then((res) => {
                this.userList1 = res.rows
            })
        },
        // 新增-树状节点选中
        checkChange(data, data1) {
            console.log(data)
            console.log(data1)
            let srt = []
            data1.checkedKeys
            if (data1.checkedKeys.length > 0) {
                data1.checkedKeys.map((res) => {
                    let obj = {
                        id: ""
                    }
                    obj.id = res
                    srt.push(obj)
                })
            }
            this.$set(this.form, 'dataJson', JSON.stringify(srt))
            let titleValue = ''
            data1.checkedNodes.map((res) => {
                titleValue = res.label + ',' + titleValue
            })
            this.alertText = '生效范围已选择：' + titleValue
        },
    }
}
</script>
<style lang="scss" scoped>
.box {
    margin: 20px 10px;

    .box_operate {
        margin-left: 10px;
        margin-bottom: 20px;
    }


}

.jiantou {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.num {
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 20px;
    color: red;
    font-weight: 600
}
</style>